<template>
  <div>
    <steps :active-step="activeStep" />
    <div v-if="activeStep===0">
      <div v-loading="dataLoading" element-loading-text="加载中">

        <div class="qup-title-box"><span class="border" /><span>门店基础信息</span></div>
        <el-form
          ref="refForm"
          style="margin-top:20px"
          :rules="formConstRules"
          :model="formDataConst"
          size="mini"
          label-width="150px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店:" prop="shopCode">
                <input-with-dialog
                  v-if="!id"
                  v-model="shop"
                  :props="{label:'name',value:'code'}"
                  :config="dialogConfigShop"
                  @change="handleChangeShop"
                />
                <span v-else>{{ formDataConst.shopName }}</span>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--由门店自动带出 -->
              <el-form-item label="门店编码:" prop="shopCode">
                <el-input v-model="formDataConst.shopCode" placeholder="——" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <!--由门店自动带出 -->
              <el-form-item label="客户编码:" prop="clientCode">
                <el-input v-model="formDataConst.clientCode" placeholder="——" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!--由门店自动带出 -->
              <el-form-item label="所属客户:" prop="clientName">
                <el-input v-model="formDataConst.clientName" placeholder="——" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属办事处:" prop="officeName">
                <el-input v-model="formDataConst.officeName" placeholder="——" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="经销商姓名:" prop="customerName">
                <el-input v-model="formDataConst.customerName" placeholder="——" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经销商电话:" prop="customerPhone">
                <el-input v-model="formDataConst.customerPhone" placeholder="——" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="门店经营面积:" prop="shopArea">
                <el-input v-model.number="formDataConst.shopArea" disabled maxlength="4">
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店类型:" prop="shopType">
                <el-select
                  v-model="formDataConst.shopType"
                  disabled
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shopTypeOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店业务类型:" prop="shopBizType">
                <el-select
                  v-model="formDataConst.shopBizType"
                  multiple
                  disabled
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in shopBizTypeOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店城市级别:" prop="shopCityLevel">
                <c-dict-select
                  v-model="formDataConst.shopCityLevel"
                  dict-type-code="CITY_LEVEL"
                  placeholder="请选择"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店营业状态:" prop="businessStatus">
                <el-select
                  v-model="formDataConst.businessStatus"
                  placeholder="——"
                  disabled
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in businessStateOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="门店详细地址:" prop="shopAddress">
                <el-input v-model="formDataConst.shopAddress" placeholder="请输入门店详细地址" type="textarea" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店建设项目号:" prop="constCode">
                <el-input v-model="formDataConst.constCode" placeholder="请填写" disabled />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="装修形式:" prop="decorationForm">
                <el-select
                  v-model="formDataConst.decorationForm"
                  multiple
                  :disabled="formDataConst.dataSource==='ARTIFICIAL'"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in decorationFormOptions"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-if="formDataConst.dataSource==='ARTIFICIAL'" :span="24">
              <el-form-item label="门店建设范围:" prop="decorationRange">
                <el-checkbox-group v-model="formDataConst.decorationRange">
                  <el-checkbox
                    v-for="item in buildRangeOptions"
                    v-show="item.dictCode==='DOOR'"
                    :key="item.dictCode"
                    :label="item.dictCode"
                    :disabled="item.dictCode==='DOOR'"
                  >{{ item.dictName }}</el-checkbox>
                </el-checkbox-group>
                <span style="color:#999;margin-left:10px">{{ '门头为临街独立门头，设计店中店外观（门楣）请选卖场' }}</span>
              </el-form-item>
            </el-col>
            <el-col v-else :span="24">
              <el-form-item label="门店建设范围:" prop="decorationRange">
                <el-checkbox-group v-model="formDataConst.decorationRange" style="display:inline-block">
                  <el-checkbox
                    v-for="item in buildRangeOptions"
                    :key="item.dictCode"
                    :label="item.dictCode"
                    :disabled="item.dictCode==='STORES'"
                  >{{ item.dictName }}</el-checkbox>
                </el-checkbox-group>

                <span style="color:#999;margin-left:10px">{{ '门头为临街独立门头，设计店中店外观（门楣）请选卖场' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="报图类型:" prop="marketType">
                <c-dict-select
                  v-model="formDataConst.marketType"
                  dict-type-code="MARKET_TYPE"
                  :disabled="formDataConst.constructDataSource==='A'"
                  placeholder="请选择"
                  @change="changeMarketType"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="门店建设类型:" prop="constType">
                <el-select
                  v-model="formDataConst.constType"
                  placeholder="请选择"
                  :disabled="formDataConst.constructDataSource==='A'"
                >
                  <el-option
                    v-for="item in formDataConst.marketType==='NEW_MARKET'? constTypeOptions.slice(0,2): constTypeOptions.slice(2)"
                    :key="item.dictCode"
                    :label="item.dictName"
                    :value="item.dictCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="商家类别:" prop="bizmanType">
                <c-dict-select
                  v-model="formDataConst.bizmanType"
                  dict-type-code="BIZMAN_TYPE"
                  :disabled="formDataConst.constructDataSource==='A'||formDataConst.marketType==='RECTIFY_MARKET'"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="6">
              <el-form-item label="测量卖场面积:" prop="surveyShopArea">
                <el-input v-model.number="formDataConst.surveyShopArea" disabled maxlength="4">
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="扩建面积:" prop="surveyExpansionArea">
                <el-input v-model.number="formDataConst.surveyExpansionArea" disabled maxlength="4">
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="翻新面积:" prop="surveyRefurbishArea">
                <el-input v-model.number="formDataConst.surveyRefurbishArea" disabled maxlength="4">
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
            </el-col>

            <!-- <el-col :span="6">
              <el-form-item label="办事处性质:" prop="officeNature">
                <el-input v-model="formDataConst.officeNature" disabled />
              </el-form-item>
            </el-col> -->
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="是否KA卖场:" prop="isKaMarket">
                <el-select v-model="formDataConst.isKaMarket" placeholder="请选择">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计进场装修时间:" prop="expectRenovationTime">
                <el-date-picker
                  v-model="formDataConst.expectRenovationTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计开业时间:" prop="expectOpenTime">
                <el-date-picker
                  v-model="formDataConst.expectOpenTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="设计申请说明:">
                <el-input
                  v-model="formDataConst.applyDesc"
                  :autosize="{ minRows: 3, maxRows: 6}"
                  type="textarea"
                  maxlength="1000"
                  show-word-limit
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-show="formDataConst.decorationRange.includes('DOOR')">
          <div class="qup-title-box"><span class="border" /><span>门头设计申请信息</span></div>
          <el-form
            ref="refDoorForm"
            style="margin-top:20px"
            :rules="formDoorRules"
            :model="formDoorData"
            size="mini"
            label-width="150px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item
                  :rules="[{required:formDataConst.decorationRange&&formDataConst.decorationRange.includes('DOOR'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="门头报图面积:"
                  prop="doorHeadPicArea"
                >
                  <el-input v-model.number="formDoorData.doorHeadPicArea" maxlength="4" placeholder="请填写面积">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="门头模式:" prop="doorHeadMode">
                  <c-dict-select
                    v-model="formDoorData.doorHeadMode"
                    dict-type-code="DOOR_HEAD_MODE"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="入口门类型:" prop="entranceType">
                  <el-select
                    v-model="formDoorData.entranceType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in entranceTypeOptions"
                      :key="item.dictCode"
                      :label="item.dictName"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="门头设计内容:" prop="doorHeadDesign">
                  <el-checkbox-group v-model="formDoorData.doorHeadDesign">
                    <el-checkbox
                      v-for="item in doorHeadsOptions"
                      :key="item.dictCode"
                      :label="item.dictCode"
                    >{{ item.dictName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否需要门头效果图:">
                  <el-select
                    v-model="formDoorData.isNeedRendering"
                    placeholder="请选择"
                  >
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div v-show="formDataConst.decorationRange.includes('STORES')">
          <div class="qup-title-box"><span class="border" /><span>卖场设计申请信息</span></div>
          <el-form
            ref="refStoreForm"
            style="margin-top:20px"
            :rules="formStoreRules"
            :model="formStoreData"
            size="mini"
            label-width="150px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="所在楼层:" prop="floors">
                  <el-input v-model="formStoreData.floors" maxlength="32">
                    <span slot="suffix">楼</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="可吊顶最低高度:" prop="ceilingMinHeight">
                  <el-input v-model="formStoreData.ceilingMinHeight" disabled style="width:180px" type="number">
                    <span slot="suffix">米</span>
                  </el-input>
                  <span style="color:#999;margin-left:10px">定制产品：层高低于2.8M不予设计,
                    成品产品：层高低于2.5M不予设计</span>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="bread-box"><span>各区域建议报图面积</span></div>
            <el-row>
              <el-col :span="8">
                <el-form-item prop="newBusinessSuggestArea" label="新业务建议面积:">
                  {{ (formStoreData.newBusinessSuggestArea||'0')+'㎡' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="softwareSuggestArea" label="软体建议面积:">
                  {{ (formStoreData.softwareSuggestArea||'0')+'㎡' }}
                </el-form-item>
              </el-col> <el-col :span="8">
                <el-form-item prop="finishedProductSuggestArea" label="成品套房建议面积:">
                  {{ (formStoreData.finishedProductSuggestArea||'0')+'㎡' }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item prop="publicSuggestArea" label="公共区建议面积:">
                  {{ (formStoreData.publicSuggestArea||'0')+'㎡' }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="miniSleepArea" label="微型睡眠区建议面积:">
                  {{ (formStoreData.miniSleepArea||'0')+'㎡' }}
                </el-form-item>
              </el-col>
            </el-row>
            <div class="bread-box"><span>区域报图信息</span></div>
            <el-row>
              <el-col :span="8">
                <el-form-item label="所选设计方案:" prop="selectedDesign">
                  <input-with-dialog
                    v-model="selectedDesign"
                    :props="{label:'programName',value:'programCode'}"
                    :config="dialogSelectedDesign"
                    @change="handleChangeDesign"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计申请业务类型:" prop="applyBizType">
                  <el-select
                    v-model="formStoreData.applyBizType"
                    multiple
                    disabled
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in applyBizTypeOptions"
                      :key="item.dictCode"
                      :label="item.dictName"
                      :value="item.dictCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <!-- 根据所选值，当选择对应区域时，对应区域面积字段必填； -->

                <el-form-item prop="applySpecialZone" label="设计申请区域:">
                  <div v-show="applyZoneOptions.length===0" style="color:#999">请先选择设计方案</div>
                  <div v-show="applyZoneOptions.length>0" style="color:#999">
                    1、多功能墙面家居：新店必上，翻新店面根据空间可利用性设计<br>
                    2、情景间：情景间为配合软体销售设计，必须设计软体才能同步设计情景间<br>
                    3、窗帘：新店必上，翻新店面根据空间可利用性设计<br>
                    4、整体橱柜：橱柜只能上样专区，专区至少5套橱柜<br>
                    5、木门：所有店面必上，800㎡以上店面上专区，800㎡以下店面可融入上样，不低于8扇
                  </div>
                  <el-checkbox-group
                    v-show="applyZoneOptions.length>0"
                    v-model="formStoreData.applySpecialZone"
                    @change="changeSpecialZone"
                  >
                    <!-- 多功能墙面不允许勾选。界面上仅作展示 Q017-->
                    <el-checkbox
                      v-for="item in applyZoneOptions"
                      :key="item.areaCode"
                      :disabled="!!item.isMustUp"
                      :label="item.areaCode"
                    >{{ item.areaName }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q002')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q002'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="全屋定制面积:"
                  prop="wholeHouseCustomizedArea"
                >
                  <el-input v-model.number="formStoreData.wholeHouseCustomizedArea" maxlength="4" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q014')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q014'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="软体面积:"
                  prop="softwareArea"
                >
                  <el-input v-model.number="formStoreData.softwareArea" maxlength="4" @input="accountSoftArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q015')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q015'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  label="套房面积:"
                  prop="suiteArea"
                >
                  <el-input v-model.number="formStoreData.suiteArea" maxlength="4" @input="accountSuitArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q004')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q004'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="bathroomArea"
                  label="卫浴面积:"
                >
                  <el-input v-model.number="formStoreData.bathroomArea" maxlength="4" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>

                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q005')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q005'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="sampleRoomArea"
                  label="样板间面积:"
                >
                  <el-input v-model.number="formStoreData.sampleRoomArea" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q003')" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q003'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="wholeCabinetArea"
                  label="整体橱柜面积:"
                >
                  <el-input v-model.number="formStoreData.wholeCabinetArea" maxlength="4" @input="accountSummaryArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q019')">
              <el-col :span="24">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q019'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="sceneArea"
                  label="情景间面积:"
                >
                  <el-input v-model.number="formStoreData.sceneArea" style="width:190px" maxlength="4" @input="accountSoftArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                  <span style="color:#999;margin-left:10px">情景间为配合软体销售设计，必须设计软体才能同步设计情景间</span>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006')">
              <el-col :span="24">
                <!-- <el-col span="8"> -->

                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="publicSpaceArea"
                  label="公共区面积:"
                >

                  <el-input v-model.number="formStoreData.publicSpaceArea" style="width:190px" maxlength="4" @input="accountPublicSumArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                  <span style="color:#999;margin-left:10px">过道、设计会销区、前厅等，参考整店面积20%</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018')" :span="24">
                <el-form-item
                  :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018'),message:'请填写面积'},
                           { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }]"
                  prop="furnishArea"
                  label="装修主材区面积:"
                >
                  <div style="color:#999">1.根据预计上样的品类，提前预计主材区划分的大致面积<br>
                    2.目前以下品类有参考造型，如商家有其他主材上样需求，可单独沟通<br>
                    3.大面积主材区会对商家需要主营、多上样的品类扩大面积，请根据店面经营计划沟通需要主营的品类</div>
                  <el-input v-model.number="formStoreData.furnishArea" style="width:200px" maxlength="4" @input="accountPublicSumArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row>

              <el-col :span="8">
                <el-form-item label="是否含换代特价区:" prop="isSpecialDistrict">
                  <el-radio-group v-model="formStoreData.isSpecialDistrict">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-show="formStoreData.isSpecialDistrict&&formStoreData.isSpecialDistrict===1" :span="8">
                <el-form-item
                  :rules="[{required:formStoreData.isSpecialDistrict&&formStoreData.isSpecialDistrict===1,message:'请填写面积'},
                           { pattern: /^([0-9]\d*)$/, message: '只能输入正整数' }]"
                  label="换代特价区面积:"
                  prop="specialDistrictArea"
                >
                  <el-input v-model.number="formStoreData.specialDistrictArea" maxlength="4" @input="accountPublicSumArea">
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row>
              <el-col :span="24">
                <el-form-item label="卖场报图总面积:" prop="shopTotalArea">
                  <el-input v-model.number="formStoreData.shopTotalArea" style="width:180px" maxlength="4" placeholder="请填写面积">
                    <span slot="suffix">不小于{{ (formStoreData.suiteSumArea||0)+ (formStoreData.newBusinessAreaSummary||0)+(formStoreData.softwareSumArea||0) +(formStoreData.publicSumArea ||0) }}㎡</span>
                  </el-input>
                  <span v-show="(formStoreData.suiteSumArea||0)+ (formStoreData.newBusinessAreaSummary||0)+(formStoreData.softwareSumArea||0) +(formStoreData.publicSumArea ||0) > formDataConst.surveyShopArea" style="color:#E6A23C">您选择的区域汇总面积已大于测绘面积</span>
                  <span v-show="formStoreData.shopTotalArea> formDataConst.surveyShopArea" style="color:#E6A23C">&nbsp;&nbsp;您输入的卖场报图总面积已大于测绘面积</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <!-- 全屋定制+整体橱柜+卫浴+样板间面积 -->
                <el-form-item label="新业务面积汇总:">
                  <el-input v-model.number="formStoreData.newBusinessAreaSummary" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!-- 软体面积+情景间面积 -->
                <el-form-item label="软体区面积汇总:">
                  <el-input v-model.number="formStoreData.softwareSumArea" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="套房区面积汇总:">
                  <el-input v-model.number="formStoreData.suiteSumArea" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <!-- 公共区+装修主材区面积 -->
                <el-form-item label="公共区面积汇总:">
                  <el-input v-model.number="formStoreData.publicSumArea" disabled>
                    <span slot="suffix">㎡</span>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 所选设计区域”值勾选了“公共区”时，展示此模块内容 -->
            <div v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006')">
              <div class="bread-box"><span>公共区设计内容</span></div>
              <!-- <el-row v-if="formStoreData.isDesignPublicSpace&&formStoreData.isDesignPublicSpace===1"> -->
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q006'),message:'请选择'}]"
                    prop="publicSpaceContent"
                    label="公共空间设计内容:"
                  >
                    <el-checkbox-group v-model="formStoreData.publicSpaceContent">
                      <el-checkbox
                        v-for="item in publicSpaceOptions"
                        :key="item.dictCode"
                        :label="item.dictCode"
                      >{{ item.dictName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('GUIDE_SYSTEM')" :span="8">
                  <el-form-item
                    prop="guideSysProgram"
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('GUIDE_SYSTEM')&&formStoreData.applySpecialZone.includes('Q006'), message: '请选择', trigger: 'change' }]"
                    label="导视系统设计方案:"
                  >
                    <el-select
                      v-model="formStoreData.guideSysProgram"
                      style="width:200px"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in guideSysOptions"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('STAIRS')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('STAIRS')&&formStoreData.applySpecialZone.includes('Q006'), message: '请选择', trigger: 'change' }]"
                    prop="stairsProgram"
                    label="楼梯设计方案:"
                  >
                    <el-select
                      v-model="formStoreData.stairsProgram"
                      style="width:200px"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in stairsOptions"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('WC')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('WC')&&formStoreData.applySpecialZone.includes('Q006'), message: '请选择', trigger: 'change' }]"
                    prop="toiletProgram"
                    label="卫生间设计方案:"
                  >
                    <el-select
                      v-model="formStoreData.toiletProgram"
                      style="width:200px"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in toiletOptions"
                        :key="item.dictCode"
                        :label="item.dictName"
                        :value="item.dictCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col v-show="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('DESIGN_AREA')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('DESIGN_AREA')&&formStoreData.applySpecialZone.includes('Q006'), message: '请填写', trigger: 'change' }]"
                    prop="designerStationNum"
                    label="设计师工位数量:"
                  >
                    <el-input v-model.number="formStoreData.designerStationNum" maxlength="2" placeholder="请输入" />
                  </el-form-item>
                </el-col>
                <el-col v-if="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('OFFICE')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('OFFICE')&&formStoreData.applySpecialZone.includes('Q006'), message: '请填写', trigger: 'change' }]"
                    prop="officeNum"
                    label="办公室设计数量:"
                  >
                    <el-input v-model.number="formStoreData.officeNum" maxlength="2" placeholder="请输入" />
                  </el-form-item>
                </el-col>

                <el-col v-if="formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('ELSE')" :span="8">
                  <el-form-item
                    :rules="[{ required: formStoreData.publicSpaceContent&&formStoreData.publicSpaceContent.includes('ELSE')&&formStoreData.applySpecialZone.includes('Q006'), message: '请填写', trigger: 'change' }]"
                    prop="otherContent"
                    label="其他:"
                  >
                    <el-input v-model="formStoreData.otherContent" maxlength="1000" type="textarea" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <!-- v-show="formStoreData.isDesignPublicSpace&&formStoreData.isDesignPublicSpace===1" -->

            <!-- 所选设计区域”值勾选了“装修主材区”时，展示此模块内容，至少选择一个 -->
            <div v-show="formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018')">
              <div class="bread-box"><span>装修主材区设计内容</span></div>
              <el-row>
                <el-col :span="18">
                  <el-form-item
                    :rules="[{required:formStoreData.applySpecialZone&&formStoreData.applySpecialZone.includes('Q018'),message:'请选择'},]"
                    prop="furnishAreaContent"
                    label="装修主材区设计内容:"
                  >
                    <div style="color:#999">{{ '工艺展示需要高标准的施工要求，需由当地有制作工法展示经验的施工队进行深化施工，若无此类经验不建议选上' }}</div>
                    <el-checkbox-group v-model="formStoreData.furnishAreaContent">
                      <el-checkbox
                        v-for="item in furnishAreaOptions"
                        :key="item.dictCode"
                        :label="item.dictCode"
                      >{{ item.dictName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="qup-title-box"><span class="border" /><span>附件信息</span></div>
        <c-file-table-box v-model="files" :table-height="250" belong-model="SHOP_DESIGN" :model-id="id" />
      </div>

      <div class="btn-container">
        <el-button v-show="id" size="mini" type="primary" :disabled="submitLoading" :loading="saveLoading" @click="save(0)">保存</el-button>
        <el-button size="mini" type="primary" @click.native="handleCancel">取消</el-button>
        <el-button v-if="formDataConst.decorationRange.includes('STORES')&&!showSubmitBtn" :disabled="saveLoading" :loading="submitLoading" size="mini" type="primary" @click="next">下一步</el-button>
        <el-button v-if="!formDataConst.decorationRange.includes('STORES')||showSubmitBtn" :disabled="saveLoading" :loading="submitLoading" size="mini" type="primary" @click="save(1)">提交</el-button>
      </div>
    </div>
    <next
      v-if="activeStep===1"
      :id="id"
      :old-program-id="oldProgram"
      :program-id="formStoreData.selectedDesignId"
      :design-id="designId"
      :customer-code="customerCode"
      :client-code="formDataConst.clientCode"
      :shop-total-area="shopArea"
      :area-special-zone="areaSpecialZone"
      @changeStep="activeStep=0"
      @success="goBack"
    />
  </div>
</template>
<script>
import { searchCustomer, getBusinessAccount } from '@/api/common'
import { designSubmit, getWoleInfo, preserveAndCommit } from '@/api/user'
import { getDictByPatchType } from '@/api/dataDict'
import { getMapareaByShop, queryAreaByProCode, areaRatio, getRatioConfigPage, queryEnableArea } from '@/api/shopDesign'
import steps from './components/steps'
import next from './next.vue'

export default {
  name: 'DesignEdit',
  components: { steps, next },
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      id: '',
      dataLoading: false,
      modelId: '',
      files: [],
      activeStep: 0,
      customerCode: '',
      showSubmitBtn: false, // 当设计区域不包括任何设计方案时，不显示下一步按钮
      areaSpecialZone: [], // 设计申请区域数据
      constTypeOptions: [], // 建设类型
      SHOP_TYPE: [],
      shopTypeOptions: [],
      saveLoading: false,
      submitLoading: false,
      shop: [], // 门店
      selectedDesign: [{ code: '', name: '' }], // 所选设计方案
      designId: '',
      areaOption: [],
      oldProgram: '',
      publicSpaceContent: [],
      toiletOptions: [],
      shopArea: {},
      // 门店建设基础信息
      formDataConst: {
        id: '',
        shopArea: 0,
        surveyRefurbishArea: 0, // 翻新面积--门店档案面积
        surveyExpansionArea: 0, // 扩建面积--门店档案面积
        surveyShopArea: 0, // 测量卖场面积--门店档案面积
        officeNature: '',
        constructDataSource: '',
        dataSource: 'ARTIFICIAL', // 数据来源
        shopCode: '', // 所属门店
        shopName: '',
        clientName: '', // 所属客户
        clientCode: '',
        officeName: '', // 所属办事处
        customerName: '', // 经销商
        customerPhone: '',
        shopType: '', // 门店类型
        shopBizType: [], // 门店业务类型
        shopCityLevel: '', // 门店城市级别
        shopAddress: '', // 门店详细地址
        businessStatus: '', // 门店营业状态
        constCode: '', // 门店建设项目号
        decorationRange: ['DOOR'], // 门店建设范围
        marketType: '', // 报图类型
        constType: '', // 建设类型
        bizmanType: '', // 商家类别
        decorationForm: ['PACKAGE'], // 装修形式
        isKaMarket: 1, // 是否KA卖场
        expectRenovationTime: '', // 预计进场装修时间
        expectOpenTime: '', // 预计开业时间
        applyDesc: '' // 设计申请说明
      },
      guideSysOptions: [], // 导视系统设计方案
      stairsOptions: [], // 楼梯设计方案
      toiletProgram: [], // 卫生间设计方案
      buildRangeOptions: [], // 门店建设范围
      publicSpaceOptions: [], // 公共区域选择
      furnishAreaOptions: [], // 装修主材区
      doorHeadsOptions: [], // 门头设计内容
      applyZoneOptions: [], // 申请区域下拉选择
      shopBizTypeOptions: [], // 门店业务类型
      decorationFormOptions: [], // 装修形式
      businessStateOptions: [], // 门店营业状态
      entranceTypeOptions: [], // 入口门类型
      applyBizTypeOptions: [], // 申请业务类型
      formData: {
      },
      // 门头设计申请信息
      formDoorData: {
        doorHeadPicArea: undefined, // 门头报图面积
        doorHeadMode: '', // 门头模式
        entranceType: '', // 入口门类型
        doorHeadDesign: [], // 门头设计内容
        isNeedRendering: 1 // 是否需要门头效果图
      },
      // 卖场设计申请信息
      formStoreData: {
        applyBizType: [], // 设计申请业务类型
        applySpecialZone: [], // 设计申请区域

        haveCurtain: undefined, // 是否含窗帘
        haveWallChange: undefined, // 是否含墙变
        floors: '', // 所在楼层
        ceilingMinHeight: 0, // 可吊顶最低高度
        shopTotalArea: 0, // 卖场总面积
        wholeHouseCustomizedArea: undefined, // 全屋定制面积
        wholeCabinetArea: undefined, // 整体橱柜面积
        bathroomArea: undefined, // 卫浴面积
        sampleRoomArea: undefined, // 样板间面积
        isDesignPublicSpace: undefined, // 是否设计公共空间
        publicSpaceArea: undefined, // 公共区面积
        newBusinessAreaSummary: 0, // 新业务面积汇总
        // isSpecialDistrict: undefined, // 是否含换代特价区
        // specialDistrictArea: undefined, // 换代特价区面积
        guideSysProgram: '', // 导视系统设计方案
        stairsProgram: '', // 楼梯设计方案
        toiletProgram: '', // 卫生间设计方案
        designerStationNum: 0, // 设计师工位数量
        officeNum: 0, // 办公室设计数量
        otherContent: '', // 其他说明
        publicSpaceContent: [], // 公共区域

        // 新增字段
        newBusinessSuggestArea: 0, // 新业务建议面积
        softwareSuggestArea: 0, // 软体建议面积
        finishedProductSuggestArea: 0, // 成品套房建议面积
        publicSuggestArea: 0, // 公共区建议面积
        miniSleepArea: 0, // 微型睡眠区建议面积
        selectedDesign: '', // 所选设计方案
        selectedDesignId: '', // 所选设计方案
        softwareArea: undefined, // 软体面积
        suiteArea: undefined, // 套房面积
        sceneArea: undefined, // 情景间面积
        furnishArea: undefined, // 装修主材区面积
        publicSumArea: 0, // 公共区面积汇总
        suiteSumArea: 0, // 套房区面积汇总
        furnishAreaContent: [] // 装修主材区设计内容
      },
      formConstRules: {
        shopCode: [{ required: true, message: '请选择门店', trigger: 'change' }],
        decorationRange: [{ required: true, message: '请选择门店建设范围', trigger: 'change' }],
        decorationForm: [{ required: true, message: '请选择装修形式', trigger: 'change' }],
        marketType: [{ required: true, message: '请选择报图类型', trigger: 'change' }],
        constType: [{ required: true, message: '请选择门店建设类型', trigger: 'change' }],
        bizmanType: [{ required: true, message: '请选择商家类别', trigger: 'change' }],
        isKaMarket: [{ required: true, message: '请选择是否KA卖场', trigger: 'change' }],
        expectRenovationTime: [{ required: true, message: '请选择预计进场装修时间', trigger: 'change' }],
        expectOpenTime: [{ required: true, message: '请选择预计开业时间', trigger: 'change' }]
      },
      formDoorRules: {
        doorHeadPicArea: [
          { required: false, message: '请填写门头报图面积', trigger: 'change' },
          { pattern: /^([1-9]\d*)$/, message: '只能输入正整数' }],
        entranceType: [
          { required: false, message: '请选择入口门类型', trigger: 'change' }
        ],
        doorHeadMode: [
          { required: false, message: '请选择门头模式', trigger: 'change' }
        ] },
      formStoreRules: {},
      formStoreRules1: {
        applyBizType: [{ required: false, message: '请选择设计申请业务类型', trigger: 'change' }],
        applySpecialZone: [{ required: true, message: '请选择设计申请区域', trigger: 'change' }],
        haveCurtain: [{ required: false, message: '请选择是否含窗帘', trigger: 'change' }],
        haveWallChange: [{ required: false, message: '请选择是否含墙变', trigger: 'change' }],
        floors: [{ required: true, message: '请填写所在楼层', trigger: 'change' }],
        ceilingMinHeight: [{ required: false, message: '请输入正确的最低吊顶高度', trigger: 'blur' }
          // { validator: validatePass, trigger: 'blur' }
        ],
        shopTotalArea: [
          { required: true, message: '请填写卖场总面积', trigger: 'change' },
          { pattern: /^[0-9]+$/, message: '只能输入数字' }
        ],
        selectedDesign: [
          { required: true, message: '请选择方案', trigger: 'change' }
        ],
        publicSpaceContent: [
          { required: false, message: '请选择公共空间设计内容', trigger: 'change' }
        ]
        // specialDistrictArea: [
        //   { required: false, message: '请填写换代特价区面积', trigger: 'change' },
        //   { pattern: /^[0-9]+$/, message: '只能输入数字' }
        // ],
        // isSpecialDistrict: [
        //   { required: true, message: '请选择是否含换代特价区', trigger: 'change' }
        // ]

      },
      dialogSelectedDesign: {
        title: '设计方案',
        filtersRaw: [{ 'property': 'enable', 'value': '1', 'operator': '=', 'id': 'enable' }],
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configProgram/page`,
        setting: [{ prop: 'programName', width: 100, title: '方案名称' }, { prop: 'suitMinarea', width: 100, title: '适用最小面积(㎡)' },
          { prop: 'suitMaxarea', width: 100, title: '适用最大面积(㎡)' }, { width: 100, showOverflow: true, prop: 'specialAskRemark', title: '特殊备注' }]
      },
      dialogConfigShop: {
        title: '门店',
        filtersRaw: [{ 'id': 'status', 'property': 'status', 'value': '1', 'operator': '=' }, { 'id': 'agencyName', 'property': 'agencyName', 'value': '销售公司直营部', 'operator': '<>' }],
        interfacePath: `/select-service/api/v1/shop/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      }

    }
  },
  watch: {
    'formDataConst.marketType'(v) {
      // 报图类型 当“报图类型”为“新开发市场NEW_MARKET”时，商家类别必填
      if (v && v === 'NEW_MARKET') this.formConstRules.bizmanType[0].required = true
      else this.formConstRules.bizmanType[0].required = false
    },
    'formDataConst.decorationRange'(v) {
      if (v.length === 1 && v.includes('STORES')) {
        this.formStoreRules = this.formStoreRules1
        this.formDoorData.doorHeadPicArea = undefined
      } else if (v.length === 1 && v.includes('DOOR')) {
        this.formStoreRules = []
      } else if (v.length === 2) {
        this.formStoreRules = this.formStoreRules1
      }
    },
    // 'formStoreData.isSpecialDistrict'(v) {
    //   if (v === 1) this.formStoreRules1.specialDistrictArea[0].required = true
    //   else {
    //     this.formStoreData.specialDistrictArea = undefined
    //     this.formStoreRules1.specialDistrictArea[0].required = false
    //     this.accountSummaryArea()
    //     this.accountSoftArea()
    //     this.accountPublicSumArea()
    //     this.$forceUpdate()
    //   }
    // },
    'formStoreData.applySpecialZone'(v) {
      if (v && !v.includes('Q002')) this.formStoreData.wholeHouseCustomizedArea = null
      if (v && !v.includes('Q003')) this.formStoreData.wholeCabinetArea = null
      if (v && !v.includes('Q004')) this.formStoreData.bathroomArea = null
      if (v && !v.includes('Q005')) this.formStoreData.sampleRoomArea = null
      if (v && !v.includes('Q014')) this.formStoreData.softwareArea = null
      if (v && !v.includes('Q015')) this.formStoreData.suiteArea = null
      if (v && !v.includes('Q019')) this.formStoreData.sceneArea = null
      if (v && !v.includes('Q006')) this.formStoreData.publicSpaceArea = null
      if (v && !v.includes('Q018')) this.formStoreData.furnishArea = null
      this.accountSummaryArea()
      this.accountSoftArea()
      this.accountSuitArea()
      this.accountPublicSumArea()
      this.$forceUpdate()
    }
  },
  async  created() {
    this.id = this.$route.query.id
    this.getDictByPatchTypeAll()
    // return
    if (this.id) {
      this.dataLoading = true
      await getWoleInfo(this.id).then(res => {
        if (res.success === 1) {
          // 门店基础信息
          const {
            id, constructDataSource, dataSource, shopCode, shopName, clientName, clientCode, officeName, customerName, customerPhone,
            shopType, shopBizType, shopCityLevel, shopAddress, businessStatus, constCode, decorationRange, marketType, constType, shopArea = 0,
            bizmanType, decorationForm, isKaMarket, expectRenovationTime, expectOpenTime, applyDesc, surveyShopArea = 0, surveyRefurbishArea = 0, surveyExpansionArea = 0, officeNature
          } = res.data
          this.formDataConst = {
            id, constructDataSource, dataSource, shopCode, shopName, clientName, clientCode, officeName, customerName, customerPhone,
            shopType, shopBizType, shopCityLevel, shopAddress, businessStatus, constCode, decorationRange, marketType, constType, shopArea,
            bizmanType, decorationForm, isKaMarket, expectRenovationTime, expectOpenTime, applyDesc, surveyShopArea, surveyRefurbishArea, surveyExpansionArea, officeNature
          }
          this.formDataConst.shopBizType = this.formDataConst.shopBizType && this.formDataConst.shopBizType.split(',') || []
          this.formDataConst.decorationForm = this.formDataConst.decorationForm && this.formDataConst.decorationForm.split(',') || []
          this.formDataConst.decorationRange = this.formDataConst.decorationRange && this.formDataConst.decorationRange.split(',') || []

          // 门头信息
          const { doorHeadPicArea, doorHeadMode, entranceType, doorHeadDesign, isNeedRendering } = res.data
          this.formDoorData = { doorHeadPicArea, doorHeadMode, entranceType, doorHeadDesign, isNeedRendering }
          this.formDoorData.doorHeadDesign = this.formDoorData.doorHeadDesign && this.formDoorData.doorHeadDesign.split(',') || []

          // 卖场信息
          const {
            applyBizType, applySpecialZone, haveCurtain, haveWallChange,
            floors, ceilingMinHeight, shopTotalArea = 0, wholeHouseCustomizedArea,
            wholeCabinetArea, bathroomArea, sampleRoomArea, isSpecialDistrict, specialDistrictArea,
            isDesignPublicSpace, publicSpaceArea,
            newBusinessAreaSummary, guideSysProgram,
            stairsProgram, toiletProgram, designerStationNum, officeNum, otherContent, publicSpaceContent,
            newBusinessSuggestArea, softwareSuggestArea, finishedProductSuggestArea, publicSuggestArea, miniSleepArea,
            selectedDesign, selectedDesignId, softwareArea, suiteArea, sceneArea, suiteSumArea, furnishArea, publicSumArea, furnishAreaContent
          } = res.data
          this.formStoreData = {
            applyBizType, applySpecialZone, haveCurtain, haveWallChange,
            floors, ceilingMinHeight, shopTotalArea, wholeHouseCustomizedArea,
            wholeCabinetArea, bathroomArea, sampleRoomArea, isSpecialDistrict, specialDistrictArea, isDesignPublicSpace, publicSpaceArea,
            newBusinessAreaSummary, guideSysProgram,
            stairsProgram, toiletProgram, designerStationNum, officeNum, otherContent, publicSpaceContent,
            newBusinessSuggestArea, softwareSuggestArea, finishedProductSuggestArea, publicSuggestArea, miniSleepArea, selectedDesign, selectedDesignId,
            softwareArea, suiteArea, sceneArea, suiteSumArea, furnishArea, publicSumArea, furnishAreaContent
          }
          this.oldProgram = this.formStoreData.selectedDesignId
          this.formStoreData.publicSpaceContent = this.formStoreData.publicSpaceContent && this.formStoreData.publicSpaceContent.split(',') || []
          this.formStoreData.applyBizType = this.formStoreData.applyBizType && this.formStoreData.applyBizType.split(',') || []
          this.formStoreData.applySpecialZone = this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.split(',') || []
          this.formStoreData.furnishAreaContent = this.formStoreData.furnishAreaContent && this.formStoreData.furnishAreaContent.split(',') || []
        }
        this.dataLoading = false
      })
      this.getAreaSync(this.formDataConst.constCode)
      this.selectedDesign = [{ value: this.formStoreData.selectedDesignId, label: this.formStoreData.selectedDesign }]
      this.shop = [{ value: this.formDataConst.shopCode, label: this.formDataConst.shopName }]
      this.getAreaRatio()
      this.getDesignOptions(this.formStoreData.selectedDesignId)
    }
  },
  methods: {
    getAreaSync(data) {
      if (!data) return
      // 根据门店获取测绘数据的 测量卖场面积，翻新面积，扩建面积
      //  surveyRefurbishArea // 翻新面积--门店档案面积
      // surveyExpansionArea // 扩建面积--门店档案面积
      // surveyShopArea // 测量卖场面积--门店档案面积
      // officeNature//办事处性质
      getMapareaByShop(data).then(res => {
        if (res.success === 1) {
          const temp = res.data.records.filter(el => el.isValid)
          if (temp.length > 0) {
            this.formDataConst.surveyRefurbishArea = temp[0].surveyRefurbishArea || 0
            this.formDataConst.surveyExpansionArea = temp[0].surveyExpansionArea || 0
            this.formDataConst.surveyShopArea = temp[0].surveyShopArea || 0
            this.formStoreData.ceilingMinHeight = temp[0].ceilingMinHeight || this.formStoreData.ceilingMinHeight || 0
            this.formDataConst.officeNature = temp[0].officeNature || ''
          } else {
            this.formDataConst.surveyRefurbishArea = 0
            this.formDataConst.surveyExpansionArea = 0
            this.formDataConst.surveyShopArea = 0
            this.formStoreData.ceilingMinHeight = 0
            this.formDataConst.officeNature = ''
          }
        }
      })
    },
    getDesignOptions(data) {
      if (!data) return
      this.applyZoneOptions = []
      let list1 = []
      let list2 = []
      queryAreaByProCode(data).then(res => {
        if (res.success === 1 && res.data.records.length > 0) {
          list1 = res.data.records
          queryEnableArea().then(res => {
            if (res.success === 1) {
              list2 = res.data.records
              list1.forEach(v => {
                list2.forEach(el => { if (v.areaCode === el.areaCode && v.areaCode !== 'Q106') this.applyZoneOptions.push(v) })// 产品橱窗不允许显示
              })
              if (this.formStoreData.applySpecialZone.length === 0) {
                res.data.records.forEach(v => {
                  if (v.isMustUp) this.formStoreData.applySpecialZone.push(v.areaCode)
                })
              }

              this.changeSpecialZone(this.formStoreData.applySpecialZone)
            }
          }).catch(() => {})
        }
      }).catch(() => {})
    },
    // 获取区域占比情况
    getAreaRatio() {
      //  newBusinessSuggestArea: 0, // 新业务建议面积
      //   softwareSuggestArea: 0, // 软体建议面积
      //   finishedProductSuggestArea: 0, // 成品套房建议面积
      //   miniSleepArea: 0, // 微型睡眠区建议面积
      //   publicSuggestArea: 0, // 公共区建议面积

      getRatioConfigPage(this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea).then(res => {
        if (res.success === 1 && res.data.records.length > 0) {
          areaRatio(res.data.records[0].id).then(res => {
            if (res.success === 1 && res.data.records.length > 0) {
              res.data.records.forEach(v => {
                if (v.specialAreaType === 'A') this.formStoreData.newBusinessSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'B') this.formStoreData.softwareSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'C') this.formStoreData.finishedProductSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'D') this.formStoreData.miniSleepArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
                if (v.specialAreaType === 'E') this.formStoreData.publicSuggestArea = ((this.formDataConst.shopArea + this.formDataConst.surveyExpansionArea) * v.areaRatio * 0.01).toFixed(0)
              })
            }
          })
        }
      })
    },
    changeSpecialZone(data) {
      if (!data) return
      const tempArr = []
      if (data.includes('Q015') || data.includes('Q014')) tempArr.push('01')
      if (data.includes('Q002') || data.includes('Q019')) tempArr.push('02')
      if (data.includes('Q003')) tempArr.push('03')
      if (data.includes('Q004')) tempArr.push('04')
      if (data.includes('Q005')) tempArr.push('02', '03', '04')
      this.formStoreData.applyBizType = Array.from(new Set(tempArr))
      if (data.includes('Q002') || data.includes('Q003') || data.includes('Q004') || data.includes('Q005') || data.includes('Q014') || data.includes('Q015') || data.includes('Q019')) this.showSubmitBtn = false
      else this.showSubmitBtn = true
    },
    changeMinHeigh(data) {
      const num = Number(data)
      const tem = /^[1-9]\d*\,\d*|[1-9]\d*$/
      if (!tem.test(num)) {
        this.$message.warning('请输入正确的最低吊顶高度')
        return
      }
      this.formStoreData.ceilingMinHeight = Number(data)
    },
    changeMarketType(data) {
      if (data === 'RECTIFY_MARKET') this.formDataConst.bizmanType = 'OLD'
      this.formDataConst.constType = ''
    },
    handleCancel() {
      this.$confirm(`更改数据未保存,是否退出?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.goBack()
      })
    },

    // 新业务面积
    accountSummaryArea() {
      this.formStoreData.newBusinessAreaSummary = (this.formStoreData.wholeHouseCustomizedArea || 0) + (this.formStoreData.wholeCabinetArea || 0) +
      (this.formStoreData.bathroomArea || 0) + (this.formStoreData.sampleRoomArea || 0)
    },
    // 软体区面积汇总
    accountSoftArea() {
      this.formStoreData.softwareSumArea = (this.formStoreData.softwareArea || 0) + (this.formStoreData.sceneArea || 0)
    },
    // 套房区面积汇总
    accountSuitArea() {
      this.formStoreData.suiteSumArea = this.formStoreData.suiteArea || 0
    },
    // 公共区面积汇总
    accountPublicSumArea() {
      this.formStoreData.publicSumArea = (this.formStoreData.publicSpaceArea || 0) + (this.formStoreData.furnishArea || 0)
    },
    goBack() {
      this.$store.dispatch('views/goBack')
    },
    clearApplyArea(v) {
      if (!v.includes('Q002')) this.formStoreData.wholeHouseCustomizedArea = 0
      if (!v.includes('Q003')) this.formStoreData.wholeCabinetArea = 0
      if (!v.includes('Q004')) this.formStoreData.bathroomArea = 0
      if (!v.includes('Q005')) this.formStoreData.sampleRoomArea = 0
      if (!v.includes('Q014')) this.formStoreData.softwareArea = 0
      if (!v.includes('Q015')) this.formStoreData.suiteArea = 0
      if (!v.includes('Q019')) this.formStoreData.sceneArea = 0
      if (!v.includes('Q006')) this.formStoreData.publicSpaceArea = 0
      if (!v.includes('Q018')) this.formStoreData.furnishArea = 0
      // if (!this.formStoreData || !this.formStoreData.isSpecialDistrict === 1) this.formStoreData.specialDistrictArea = 0
      if (!this.formDataConst.decorationRange.includes('DOOR')) this.formDoorData.doorHeadPicArea = 0
    },
    formatData() {
      this.formDataConst.decorationForm = this.formDataConst.decorationForm && this.formDataConst.decorationForm.toString() || ''
      this.formDataConst.decorationRange = this.formDataConst.decorationRange && this.formDataConst.decorationRange.toString() || ''
      this.formDataConst.shopBizType = this.formDataConst.shopBizType && this.formDataConst.shopBizType.toString() || ''
      this.formStoreData.applySpecialZone = this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.toString() || ''
      this.formStoreData.applyBizType = this.formStoreData.applyBizType && this.formStoreData.applyBizType.toString() || ''
      this.formStoreData.publicSpaceContent = this.formStoreData.publicSpaceContent && this.formStoreData.publicSpaceContent.toString() || ''
      this.formStoreData.furnishAreaContent = this.formStoreData.furnishAreaContent && this.formStoreData.furnishAreaContent.toString() || ''
      this.formDoorData.doorHeadDesign = this.formDoorData.doorHeadDesign && this.formDoorData.doorHeadDesign.toString() || ''

      if (!this.formDataConst.decorationRange.includes('DOOR')) {
        this.formDoorData.doorHeadPicArea = undefined
        this.formDoorData.doorHeadMode = ''
        this.formDoorData.entranceType = ''
        this.formDoorData.doorHeadDesign = ''
        this.formDoorData.isNeedRendering = undefined
      }
      if (!this.formDataConst.decorationRange.includes('STORES')) {
        // 卖场设计申请信息
        this.selectedDesign = [{ code: '', name: '' }] // 所选设计方案
        this.formStoreData = {
          applyBizType: '', // 设计申请业务类型
          applySpecialZone: '', // 设计申请区域
          haveCurtain: undefined, // 是否含窗帘
          haveWallChange: undefined, // 是否含墙变
          floors: '', // 所在楼层
          ceilingMinHeight: undefined, // 可吊顶最低高度
          shopTotalArea: undefined, // 卖场总面积
          wholeHouseCustomizedArea: undefined, // 全屋定制面积
          wholeCabinetArea: undefined, // 整体橱柜面积
          bathroomArea: undefined, // 卫浴面积
          sampleRoomArea: undefined, // 样板间面积
          isDesignPublicSpace: undefined, // 是否设计公共空间
          publicSpaceArea: undefined, // 公共区面积
          newBusinessAreaSummary: undefined, // 新业务面积汇总
          finishedProductAreaSummary: undefined, // 成品面积汇总
          guideSysProgram: '', // 导视系统设计方案
          isSpecialDistrict: undefined, // 是否含换代特价区
          specialDistrictArea: undefined, // 换代特价区面积
          stairsProgram: '', // 楼梯设计方案
          toiletProgram: '', // 卫生间设计方案
          designerStationNum: undefined, // 设计师工位数量
          officeNum: undefined, // 办公室设计数量
          otherContent: '', // 其他
          publicSpaceContent: '', // 公共区域

          // 新增字段
          newBusinessSuggestArea: undefined, // 新业务建议面积
          softwareSuggestArea: undefined, // 软体建议面积
          finishedProductSuggestArea: undefined, // 成品套房建议面积
          publicSuggestArea: undefined, // 公共区建议面积
          miniSleepArea: undefined, // 微型睡眠区建议面积
          selectedDesign: '', // 所选设计方案
          selectedDesignId: '', // 所选设计方案
          softwareArea: undefined, // 软体面积
          suiteArea: undefined, // 套房面积
          sceneArea: undefined, // 情景间面积
          furnishArea: undefined, // 装修主材区面积
          publicSumArea: undefined, // 公共区面积汇总
          furnishAreaContent: '' // 装修主材区设计内容
        }
      }
    },
    clearIsPublic() {
      if (!this.formStoreData.applySpecialZone.includes('Q018')) {
        this.formStoreData.furnishAreaContent = ''
      }
      if (!this.formStoreData.applySpecialZone.includes('Q006')) {
        this.formStoreData.publicSpaceArea = undefined
        this.formStoreData.guideSysProgram = ''// 导视系统设计方案
        this.formStoreData.stairsProgram = '' // 楼梯设计方案
        this.formStoreData.toiletProgram = ''// 卫生间设计方案
        this.formStoreData.designerStationNum = 0// 设计师工位数量
        this.formStoreData.officeNum = 0// 办公室设计数量
        this.formStoreData.otherContent = ''// 其他
        this.formStoreData.publicSpaceContent = ''// 公共区域
      } else {
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('GUIDE_SYSTEM')) this.formStoreData.guideSysProgram = ''
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('STAIRS')) this.formStoreData.stairsProgram = ''
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('WC')) this.formStoreData.toiletProgram = ''
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('DESIGN_AREA')) this.formStoreData.designerStationNum = 0
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('OFFICE')) this.formStoreData.officeNum = 0
        if (this.formStoreData.publicSpaceContent && !this.formStoreData.publicSpaceContent.includes('ELSE')) this.formStoreData.otherContent = ''
      }
    },
    async save(isSubmit) {
      const pass1 = await this.$refs['refForm'].validate()
      let pass2 = true
      let pass3 = true
      if (this.formDataConst.decorationRange.includes('DOOR')) pass2 = await this.$refs['refDoorForm'].validate()
      if (this.formDataConst.decorationRange.includes('STORES')) pass3 = await this.$refs['refStoreForm'].validate()

      if (!pass1 || !pass2 || !pass3) return
      if (this.formStoreData.shopTotalArea < (this.formStoreData.newBusinessAreaSummary || 0) + (this.formStoreData.softwareSumArea || 0) + (this.formStoreData.suiteArea || 0) + (this.formStoreData.publicSumArea || 0)) {
        this.$message.warning('卖场总面积小于区域面积之和，请重新填写')
        return
      }
      const newFileList = []
      this.files.forEach(el => {
        newFileList.push(el.response.data)
      })
      const tempArr = newFileList.filter(el => !el.configAttachmentId)
      if (tempArr.length > 0) {
        this.$message.warning('请完善文件类型选择')
        return
      }
      this.saveLoading = true
      this.dataLoading = true
      this.clearIsPublic()
      this.formatData()
      // this.clearApplyArea(this.formStoreData.applySpecialZone || '')
      // if (!this.formDataConst.decorationRange.includes('DOOR')) this.formDoorData = {}
      // if (!this.formDataConst.decorationRange.includes('STORES')) this.formStoreData = {}
      this.formData = { ...this.formDataConst, ...this.formDoorData, ...this.formStoreData }

      this.$set(this.formData, 'shopAttachmentDTOList', newFileList)

      const data = { ...this.formData, ...{
        wholeHouseCustomizedArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q002') ? this.formStoreData.wholeHouseCustomizedArea : 0,
        wholeCabinetArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q003') ? this.formStoreData.wholeCabinetArea : 0,
        bathroomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q004') ? this.formStoreData.bathroomArea : 0,
        sampleRoomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q005') ? this.formStoreData.sampleRoomArea : 0,
        softwareArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q014') ? this.formStoreData.softwareArea : 0,
        suiteArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q015') ? this.formStoreData.suiteArea : 0,
        sceneArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q019') ? this.formStoreData.sceneArea : 0,
        publicSpaceArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q006') ? this.formStoreData.publicSpaceArea : 0,
        furnishArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q018') ? this.formStoreData.furnishArea : 0,
        // specialDistrictArea: this.formStoreData.isSpecialDistrict === 1 ? this.formStoreData.specialDistrictArea : 0,
        doorHeadPicArea: this.formDataConst.decorationRange && this.formDataConst.decorationRange.includes('DOOR') ? this.formDoorData.doorHeadPicArea : 0
      }}
      if (isSubmit) {
        // 获取业务账号
        const businessAccountList = []
        getBusinessAccount(this.formDataConst.clientCode, 'shopdesign').then(res => {
          if (res.success === 1 && res.data.records.length > 0) {
            res.data.records.map(el => {
              businessAccountList.push({
                businessAccountCode: el.code,
                businessAccountName: el.name,
                businessAccountType: el.accountTypeName
              })
            })
            this.$set(this.formDataConst, 'businessAccountList1', businessAccountList)
            const submitData = { ...this.formDataConst, ...data }
            console.log('门头提交', submitData)
            // return
            preserveAndCommit(submitData).then(res => {
              if (res.success) {
                this.$message.success('提交成功')
                this.goBack()
                this.saveLoading = false
                this.dataLoading = false
              }
            }).catch(() => {
              this.saveLoading = false
              this.dataLoading = false
            })
          }
        })
      } else {
        designSubmit(data).then(res => {
          if (res.success) {
            this.$message.success('保存成功')
            this.goBack()
            this.saveLoading = false
            this.dataLoading = false
          }
        }).catch(() => {
          this.saveLoading = false
          this.dataLoading = false
        })
      }
      this.returnArray()
    },
    validateDecoration() {
      if (!this.formDataConst.decorationRange.includes('DOOR')) {
        this.formDoorData = { doorHeadPicArea: undefined, // 门头报图面积
          doorHeadMode: '', // 门头模式
          entranceType: '', // 入口门类型
          doorHeadDesign: [], // 门头设计内容
          isNeedRendering: 1 // 是否需要门头效果图
        }
      }
      if (!this.formDataConst.decorationRange.includes('STORES')) {
        // 卖场设计申请信息
        this.formStoreData = {
          applyBizType: [], // 设计申请业务类型
          applySpecialZone: [], // 设计申请区域
          haveCurtain: 1, // 是否含窗帘
          haveWallChange: undefined, // 是否含墙变
          floors: '', // 所在楼层
          ceilingMinHeight: 0, // 可吊顶最低高度
          shopTotalArea: 0, // 卖场总面积
          wholeHouseCustomizedArea: undefined, // 全屋定制面积
          wholeCabinetArea: undefined, // 整体橱柜面积
          bathroomArea: undefined, // 卫浴面积
          sampleRoomArea: undefined, // 样板间面积
          isDesignPublicSpace: 0, // 是否设计公共空间
          publicSpaceArea: undefined, // 公共区面积
          newBusinessAreaSummary: 0, // 新业务面积汇总
          guideSysProgram: '', // 导视系统设计方案
          // isSpecialDistrict: 0, // 是否含换代特价区
          // specialDistrictArea: undefined, // 换代特价区面积
          stairsProgram: '', // 楼梯设计方案
          toiletProgram: '', // 卫生间设计方案
          designerStationNum: 0, // 设计师工位数量
          officeNum: 0, // 办公室设计数量
          otherContent: '', // 其他
          publicSpaceContent: [], // 公共区域
          // 新增字段
          newBusinessSuggestArea: 0, // 新业务建议面积
          softwareSuggestArea: 0, // 软体建议面积
          finishedProductSuggestArea: 0, // 成品套房建议面积
          publicSuggestArea: 0, // 公共区建议面积
          miniSleepArea: undefined, // 微型睡眠区建议面积
          selectedDesign: '', // 所选设计方案
          selectedDesignId: '', // 所选设计方案
          softwareArea: undefined, // 软体面积
          suiteArea: undefined, // 套房面积
          sceneArea: undefined, // 情景间面积
          furnishArea: undefined, // 装修主材区面积
          publicSumArea: undefined, // 公共区面积汇总
          furnishAreaContent: [] // 装修主材区设计内容
        }
      }
    },
    returnArray() {
      this.formDataConst.decorationForm = (this.formDataConst.decorationForm && this.formDataConst.decorationForm.split(',')) || []
      this.formDataConst.decorationRange = (this.formDataConst.decorationRange && this.formDataConst.decorationRange.split(',')) || []
      this.formDataConst.shopBizType = (this.formDataConst.shopBizType && this.formDataConst.shopBizType.split(',')) || []
      this.formStoreData.applySpecialZone = (this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.split(',')) || []
      this.formStoreData.applyBizType = (this.formStoreData.applyBizType && this.formStoreData.applyBizType.split(',')) || []
      this.formStoreData.publicSpaceContent = (this.formStoreData.publicSpaceContent && this.formStoreData.publicSpaceContent.split(',')) || []
      this.formStoreData.furnishAreaContent = (this.formStoreData.furnishAreaContent && this.formStoreData.furnishAreaContent.split(',')) || []

      this.formDoorData.doorHeadDesign = (this.formDoorData.doorHeadDesign && this.formDoorData.doorHeadDesign.split(',')) || []
      this.validateDecoration()
      this.$forceUpdate()
    },
    async  next() {
      const pass1 = await this.$refs['refForm'].validate()
      let pass2 = true
      if (this.formDataConst.decorationRange.includes('DOOR')) pass2 = await this.$refs['refDoorForm'].validate()
      const pass3 = await this.$refs['refStoreForm'].validate()
      if (pass1 && pass2 && pass3) {
        if (this.formStoreData.shopTotalArea < (this.formStoreData.newBusinessAreaSummary || 0) + (this.formStoreData.softwareSumArea || 0) + (this.formStoreData.suiteArea || 0) + (this.formStoreData.publicSumArea || 0)) {
          this.$message.warning('卖场总面积小于区域面积之和，请重新填写')
          return
        }
        const newFileList = []
        this.files.forEach(el => {
          newFileList.push(el.response.data)
        })
        const tempArr = newFileList.filter(el => !el.configAttachmentId)
        if (tempArr.length > 0) {
          this.$message.warning('请完善文件类型选择')
          return
        }
        this.submitLoading = true
        this.dataLoading = true

        this.clearIsPublic()
        this.areaSpecialZone = this.formStoreData.applySpecialZone

        this.formatData()
        this.formData = { ...this.formDataConst, ...this.formDoorData, ...this.formStoreData }

        this.$set(this.formData, 'shopAttachmentDTOList', newFileList)
        const data = { ...this.formData, ...{
          isNext: 1, // 标识是否点击下一步
          wholeHouseCustomizedArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q002') ? this.formStoreData.wholeHouseCustomizedArea : 0,
          wholeCabinetArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q003') ? this.formStoreData.wholeCabinetArea : 0,
          bathroomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q004') ? this.formStoreData.bathroomArea : 0,
          sampleRoomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q005') ? this.formStoreData.sampleRoomArea : 0,
          softwareArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q014') ? this.formStoreData.softwareArea : 0,
          suiteArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q015') ? this.formStoreData.suiteArea : 0,
          sceneArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q019') ? this.formStoreData.sceneArea : 0,
          publicSpaceArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q006') ? this.formStoreData.publicSpaceArea : 0,
          furnishArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q018') ? this.formStoreData.furnishArea : 0,
          // specialDistrictArea: this.formStoreData.isSpecialDistrict === 1 ? this.formStoreData.specialDistrictArea : 0,
          doorHeadPicArea: this.formDataConst.decorationRange && this.formDataConst.decorationRange.includes('DOOR') ? this.formDoorData.doorHeadPicArea : 0
        }}
        designSubmit(data).then((res) => {
          if (res.success === 1) {
            this.saveLoading = false
            this.activeStep = 1
            // 请求成功后
            this.returnArray()
            this.$message({ message: '操作成功', type: 'success' })
            this.submitLoading = false
            this.dataLoading = false
            this.shopArea = {
              softwareArea: this.formData.softwareArea,
              suiteArea: this.formData.suiteArea,
              sceneArea: this.formData.sceneArea,
              bathroomArea: this.formData.bathroomArea,
              sampleRoomArea: this.formData.sampleRoomArea,
              wholeHouseCustomizedArea: this.formData.wholeHouseCustomizedArea,
              wholeCabinetArea: this.formData.wholeCabinetArea
            }
            this.designId = res.msg// id
            this.customerCode = this.formDataConst.clientCode
          }
        }).catch(() => {
          this.formatData()
          this.submitLoading = false
          this.dataLoading = false
        })
      }
    },
    // 提交数据 ，触发bpm
    async   handleSubmit() {
      const pass1 = await this.$refs['refForm'].validate()
      let pass2 = true
      let pass3 = true
      if (this.formDataConst.decorationRange.includes('DOOR')) pass2 = this.$refs['refDoorForm'].validate()
      if (this.formDataConst.decorationRange.includes('STORES')) pass3 = this.$refs['refStoreForm'].validate()
      if (!pass1 || !pass2 || !pass3) return
      // if (this.formDataConst.decorationRange.includes('STORES') && pass1 && pass2 && pass3) {
      if (this.formStoreData.shopTotalArea < (this.formStoreData.newBusinessAreaSummary || 0) + (this.formStoreData.softwareSumArea || 0) + (this.formStoreData.suiteArea || 0) + (this.formStoreData.publicSumArea || 0)) {
        this.$message.warning('卖场总面积小于区域面积之和，请重新填写')
        return
      }
      const newFileList = []
      this.files.forEach(el => {
        newFileList.push(el.response.data)
      })
      const tempArr = newFileList.filter(el => !el.configAttachmentId)
      if (tempArr.length > 0) {
        this.$message.warning('请完善文件类型选择')
        return
      }
      this.submitLoading = true
      this.dataLoading = true
      this.clearIsPublic()
      // 获取业务账号
      const businessAccountList = []
      await getBusinessAccount(this.formDataConst.clientCode, 'shopdesign').then(res => {
        if (res.success === 1 && res.data.records.length > 0) {
          res.data.records.map(el => {
            businessAccountList.push({
              businessAccountCode: el.code,
              businessAccountName: el.name,
              businessAccountType: el.accountTypeName
            })
          })
        }
      })
      this.$set(this.formDataConst, 'businessAccountList1', businessAccountList)
      this.formatData()
      // if (!this.formDataConst.decorationRange.includes('DOOR')) this.formDoorData = {}
      // if (!this.formDataConst.decorationRange.includes('STORES')) this.formStoreData = {}
      this.formData = { ...this.formDataConst, ...this.formDoorData, ...this.formStoreData }

      this.$set(this.formData, 'shopAttachmentDTOList', newFileList)
      const data = { ...this.formData, ...{
        wholeHouseCustomizedArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q002') ? this.formStoreData.wholeHouseCustomizedArea : 0,
        wholeCabinetArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q003') ? this.formStoreData.wholeCabinetArea : 0,
        bathroomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q004') ? this.formStoreData.bathroomArea : 0,
        sampleRoomArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q005') ? this.formStoreData.sampleRoomArea : 0,
        softwareArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q014') ? this.formStoreData.softwareArea : 0,
        suiteArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q015') ? this.formStoreData.suiteArea : 0,
        sceneArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q019') ? this.formStoreData.sceneArea : 0,
        publicSpaceArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q006') ? this.formStoreData.publicSpaceArea : 0,
        furnishArea: this.formStoreData.applySpecialZone && this.formStoreData.applySpecialZone.includes('Q018') ? this.formStoreData.furnishArea : 0,
        // specialDistrictArea: this.formStoreData.isSpecialDistrict === 1 ? this.formStoreData.specialDistrictArea : 0,
        doorHeadPicArea: this.formDataConst.decorationRange && this.formDataConst.decorationRange.includes('DOOR') ? this.formDoorData.doorHeadPicArea : 0
      }}
      // console.log('haha', data)
      // return
      this.save()
      preserveAndCommit(data).then(res => {
        this.saveLoading = false
        if (res.success === 1) {
          this.$message.success('提交成功')
          this.submitLoading = false
          this.dataLoading = false
          this.goBack()
        }
      }).catch(() => {
        this.submitLoading = false
        this.dataLoading = false
      })
      this.returnArray()
    },
    async getDictByPatchTypeAll() {
      const { MATERIAL_AREA, SHOP_TYPE, ENTRANCE_TYPE, CONST_TYPE, DECORATION_FORM, SHOP_BIZ_STATE, BIZ_TYPE, DOOR_HEAD_DESIGN, GUIDE_SYS_PROGRAM, STAIRS_PROGRAM, TOILET_PROGRAM, DECORATION_RANGE, PUBLIC_SPACE_CONTENT } =
      await getDictByPatchType(['MATERIAL_AREA', 'SHOP_TYPE', 'ENTRANCE_TYPE', 'CONST_TYPE', 'DECORATION_FORM', 'SHOP_BIZ_STATE', 'BIZ_TYPE', 'DOOR_HEAD_DESIGN', 'GUIDE_SYS_PROGRAM', 'STAIRS_PROGRAM', 'TOILET_PROGRAM', 'DECORATION_RANGE', 'PUBLIC_SPACE_CONTENT'])
      this.constTypeOptions = CONST_TYPE
      this.doorHeadsOptions = DOOR_HEAD_DESIGN
      this.guideSysOptions = GUIDE_SYS_PROGRAM
      this.stairsOptions = STAIRS_PROGRAM
      this.toiletOptions = TOILET_PROGRAM
      this.buildRangeOptions = DECORATION_RANGE
      this.publicSpaceOptions = PUBLIC_SPACE_CONTENT
      this.shopBizTypeOptions = BIZ_TYPE
      this.decorationFormOptions = DECORATION_FORM
      this.businessStateOptions = SHOP_BIZ_STATE// 门店营业状态
      this.applyBizTypeOptions = BIZ_TYPE
      this.entranceTypeOptions = ENTRANCE_TYPE
      this.shopTypeOptions = SHOP_TYPE
      this.furnishAreaOptions = MATERIAL_AREA
    },
    async  handleChangeShop(data) {
      if (data.length !== 0) {
        // 根据门店下的客户code查询 对应的经销商信息
        searchCustomer(data[0].customerCode, 'shopdesign').then(res => {
          if (res.success === 1 && res.data.records.length > 0) {
            if (['全友经销商', '乡镇经销商'].includes(res.data.records[0].twoCategoryName)) {
              this.formDataConst.customerName = res.data.records[0].contactName// 经销商
              this.formDataConst.customerPhone = res.data.records[0].contactPhone// 经销商电话
            } else {
              this.shop = [{ value: '', label: '' }]
              this.clearFormConst()
              this.$message.warning('客户二级分类应为【全友经销商、乡镇经销商】')
              return
            }
          }
        })
        // this.getAreaSync(data[0].code)//  无法获取constCode

        this.formDataConst.shopMarketLevel = data[0].marketLevelCode// 市场层级
        this.formDataConst.shopCode = data[0].code// 门店编码
        this.formDataConst.shopName = data[0].name// 门店名称
        this.formDataConst.shopBizType = data[0].businessType.split(',')// 门店业务类型
        this.formDataConst.clientName = data[0].customerName// 所属客户
        this.formDataConst.clientCode = data[0].customerCode// 所属客户
        this.formDataConst.officeCode = data[0].agencyCode// 所属办事处
        this.formDataConst.officeName = data[0].agencyName// 所属办事处
        this.formDataConst.shopType = data[0].shopClassify// 门店类型
        this.formDataConst.shopCityLevel = data[0].cityLevel// 门店城市级别
        this.formDataConst.shopAddress = data[0].shopAddr// 门店详细地址
        this.formDataConst.businessStatus = data[0].businessStatus// 门店营业状态
        this.formDataConst.shopArea = data[0].operateArea// 门店面积

        this.getAreaRatio()
        // this.$refs.refForm1.validateField('shopCode')
      } else {
        this.clearFormConst()
      }
    },
    // 所选设计方案
    handleChangeDesign(data) {
      this.formStoreData.applySpecialZone = []
      this.applyZoneOptions = []
      if (data.length > 0) {
        this.formStoreData.selectedDesignId = data[0].id
        this.formStoreData.selectedDesign = data[0].programName
        let list1 = []
        let list2 = []
        this.selectedDesign = [{ value: this.formStoreData.selectedDesignId, label: this.formStoreData.selectedDesign }]

        queryAreaByProCode(data[0].id).then(res => {
          list1 = res.data.records
          queryEnableArea().then(res => {
            if (res.success === 1) {
              list2 = res.data.records
              list1.forEach(v => {
                list2.forEach(el => { if (v.areaCode === el.areaCode && v.areaCode !== 'Q106') this.applyZoneOptions.push(v) })
              })
              list1.forEach(v => {
                if (v.isMustUp) this.formStoreData.applySpecialZone.push(v.areaCode)
              })
              this.changeSpecialZone(this.formStoreData.applySpecialZone)
            }
          })
        })
      }
    },
    clearFormConst() {
      this.formDataConst.shopCode = ''// 门店编码
      this.formDataConst.shopName = ''// 门店名称
      this.formDataConst.shopMarketLevel = ''
      this.formDataConst.shopBizType = []// 门店业务类型
      this.formDataConst.constCode = ''// 门店建设项目号
      this.formDataConst.clientName = ''// 所属客户
      this.formDataConst.clientCode = ''// 所属客户
      this.formDataConst.officeCode = ''// 所属办事处
      this.formDataConst.officeName = ''// 所属办事处
      this.formDataConst.shopType = ''// 门店类型
      this.formDataConst.customerName = ''// 经销商
      this.formDataConst.customerPhone = ''// 经销商电话
      this.formDataConst.shopCityLevel = ''// 门店城市级别
      this.formDataConst.shopAddress = ''// 门店详细地址
      this.formDataConst.businessStatus = ''// 门店营业状态
      this.formDataConst.shopArea = 0// 门店档案面积
      this.formDataConst.surveyRefurbishArea = 0//
      this.formDataConst.surveyExpansionArea = 0//
      this.formDataConst.surveyShopArea = 0//
      this.formDataConst.officeNature = ''//
    }
  }

}
</script>
<style lang="scss" scoped>
/deep/.table-list-box .el-table--border{
  min-height: 200px;
}
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  .btn-container{
    width: 300px;
    margin: auto;
}
</style>
